<template>
	<view class="home">
		<!-- 头部欢迎区 -->
		<view class="header">
			<view class="welcome">
				<text class="greeting">{{ greeting }}</text>
				<text class="username">{{ userInfo.nickname || '记账达人' }}</text>
			</view>
			<view class="user-avatar" @tap="goToProfile">
				<image 
					v-if="userInfo.avatar_file" 
					:src="userInfo.avatar_file.url" 
					mode="aspectFill"
				></image>
				<text v-else class="avatar-placeholder">{{ (userInfo.nickname || '我')[0] }}</text>
			</view>
		</view>

		<!-- 本月统计卡片 -->
		<view class="stats-card">
			<view class="stats-header">
				<text class="stats-title">本月账单</text>
				<text class="stats-date">{{ currentMonth }}</text>
			</view>
			<view class="stats-content">
				<view class="stat-item">
					<text class="stat-label">收入</text>
					<text class="stat-value income">+{{ monthStats.income.toFixed(2) }}</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-label">支出</text>
					<text class="stat-value expense">-{{ monthStats.expense.toFixed(2) }}</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-label">结余</text>
					<text class="stat-value balance" :class="monthStats.balance >= 0 ? 'positive' : 'negative'">
						{{ monthStats.balance.toFixed(2) }}
					</text>
				</view>
			</view>
		</view>

		<!-- 快捷功能 -->
		<view class="quick-actions">
			<view class="action-btn expense-btn" @tap="quickAdd('支出')">
				<view class="action-icon">
					<text class="icon">-</text>
				</view>
				<text class="action-text">支出</text>
			</view>
			<view class="action-btn income-btn" @tap="quickAdd('收入')">
				<view class="action-icon">
					<text class="icon">+</text>
				</view>
				<text class="action-text">收入</text>
			</view>
		</view>

		<!-- 最近记录 -->
		<view class="recent-records">
			<view class="section-header">
				<text class="section-title">最近记录</text>
				<text class="more-btn" @tap="goToList">查看全部 ›</text>
			</view>
			
			<view v-if="recentRecords.length === 0" class="empty-records">
				<text class="empty-icon">📝</text>
				<text class="empty-text">暂无记录，快去记一笔吧~</text>
			</view>
			
			<view v-else class="record-list">
				<view 
					v-for="item in recentRecords" 
					:key="item._id"
					class="record-item"
				>
					<view class="record-left">
						<view class="record-icon">
							<text class="iconfont" :class="item.category_icon || 'icon-qita'"></text>
						</view>
						<view class="record-info">
							<text class="record-category">{{ item.category_name || '未分类' }}</text>
							<text class="record-date">{{ formatDate(item.date) }}</text>
						</view>
					</view>
					<text 
						class="record-amount" 
						:class="item.type === '收入' ? 'income' : 'expense'"
					>
						{{ item.type === '收入' ? '+' : '-' }}{{ item.amount.toFixed(2) }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			monthStats: {
				income: 0,
				expense: 0,
				balance: 0
			},
			recentRecords: []
		}
	},
	computed: {
		greeting() {
			const hour = new Date().getHours()
			if (hour < 6) return '凌晨好'
			if (hour < 9) return '早上好'
			if (hour < 12) return '上午好'
			if (hour < 14) return '中午好'
			if (hour < 18) return '下午好'
			if (hour < 22) return '晚上好'
			return '夜深了'
		},
		currentMonth() {
			const date = new Date()
			return `${date.getFullYear()}年${date.getMonth() + 1}月`
		}
	},
	onShow() {
		this.loadUserInfo()
		this.loadMonthStats()
		this.loadRecentRecords()
	},
	methods: {
		// 加载用户信息
		loadUserInfo() {
			const info = uni.getStorageSync('uni-id-pages-userInfo')
			if (info) {
				this.userInfo = JSON.parse(info)
			}
		},
		
		// 加载本月统计
		async loadMonthStats() {
			try {
				const now = new Date()
				const year = now.getFullYear()
				const month = now.getMonth()
				const startDate = `${year}-${String(month + 1).padStart(2, '0')}-01`
				const endDate = `${year}-${String(month + 1).padStart(2, '0')}-${String(this.getMonthDays(year, month)).padStart(2, '0')}`
				
				const accountObj = uniCloud.importObject('account')
				const res = await accountObj.getStatistics({
					startDate,
					endDate
				})
				
				if (res.code === 0) {
					this.monthStats = res.data
				}
			} catch (e) {
				console.error('加载统计失败', e)
			}
		},
		
		// 加载最近记录
		async loadRecentRecords() {
			try {
				const accountObj = uniCloud.importObject('account')
				const res = await accountObj.listRecords({
					limit: 5,
					skip: 0
				})
				
				if (res.code === 0) {
					this.recentRecords = res.data
				}
			} catch (e) {
				console.error('加载记录失败', e)
			}
		},
		
		// 快速添加
		quickAdd(type) {
			uni.navigateTo({
				url: `/pages/account/add?type=${type}`
			})
		},
		
		// 跳转到列表
		goToList() {
			uni.switchTab({
				url: '/pages/account/list'
			})
		},
		
		// 跳转到个人中心
		goToProfile() {
			uni.navigateTo({
				url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
			})
		},
		
		// 格式化日期
		formatDate(dateStr) {
			const date = new Date(dateStr)
			const today = new Date()
			const yesterday = new Date(today)
			yesterday.setDate(yesterday.getDate() - 1)
			
			if (dateStr === this.getDateStr(today)) {
				return '今天'
			} else if (dateStr === this.getDateStr(yesterday)) {
				return '昨天'
			} else {
				return dateStr
			}
		},
		
		// 获取日期字符串
		getDateStr(date) {
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		},
		
		// 获取月份天数
		getMonthDays(year, month) {
			return new Date(year, month + 1, 0).getDate()
		}
	}
}
</script>

<style scoped>
.home {
	min-height: 100vh;
	background: linear-gradient(180deg, #667eea 0%, #764ba2 30%, #f5f5f5 30%);
	padding: 20rpx;
}

/* 头部 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0 40rpx;
}

.welcome {
	display: flex;
	flex-direction: column;
}

.greeting {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 8rpx;
}

.username {
	font-size: 40rpx;
	font-weight: bold;
	color: #fff;
}

.user-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.user-avatar image {
	width: 100%;
	height: 100%;
}

.avatar-placeholder {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}

/* 统计卡片 */
.stats-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
	margin-bottom: 30rpx;
}

.stats-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.stats-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.stats-date {
	font-size: 24rpx;
	color: #999;
}

.stats-content {
	display: flex;
	align-items: center;
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-label {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 12rpx;
}

.stat-value {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.stat-value.income {
	color: #52c41a;
}

.stat-value.expense {
	color: #ff4d4f;
}

.stat-value.balance.positive {
	color: #667eea;
}

.stat-value.balance.negative {
	color: #ff4d4f;
}

.stat-divider {
	width: 1px;
	height: 60rpx;
	background-color: #f0f0f0;
}

/* 快捷功能 */
.quick-actions {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.action-btn {
	flex: 1;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s;
}

.action-btn:active {
	transform: scale(0.95);
}

.action-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15rpx;
}

.expense-btn .action-icon {
	background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.income-btn .action-icon {
	background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.action-icon .icon {
	font-size: 60rpx;
	font-weight: bold;
	color: #fff;
}

.action-text {
	font-size: 28rpx;
	color: #333;
}

/* 最近记录 */
.recent-records {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.more-btn {
	font-size: 24rpx;
	color: #999;
}

.empty-records {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0;
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 24rpx;
	color: #999;
}

.record-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.record-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 12rpx;
}

.record-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.record-icon {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.record-icon .iconfont {
	font-size: 36rpx;
	color: #fff;
}

.record-info {
	display: flex;
	flex-direction: column;
}

.record-category {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 6rpx;
}

.record-date {
	font-size: 24rpx;
	color: #999;
}

.record-amount {
	font-size: 32rpx;
	font-weight: bold;
}

.record-amount.income {
	color: #52c41a;
}

.record-amount.expense {
	color: #ff4d4f;
}
</style>
